<template>
  <view class="blog-component-plate" @click="this.$emit('onClickListener')" :style="[shellStyle,sideLineStyle]">
    <view class="blog-component-plate-border" :style="mainStyle">
      <view class="blog-component-plate-content" :style="[kernelStyle,contentStyle]">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 80
    },
    fontSize: {
      type: Number,
      default: 14
    },
    distancePercentage: {
      type: Number,
      default: 0.2
    },
    color: {
      type: String,
      default: "#00e8a0"
    },
    fontColor: {
      type: String,
      default: "#fff"
    },
    backgroundColor: {
      type: String,
      default: "#fff"
    },
    sideLineColors: {
      type: String,
      default: null
    },
    sideLineStyle: {
      type: String
    },
    contentStyle: {
      type: Object,
      default: {}
    }
  },
  emits: ["onClickListener"],
  computed: {
    outSize() {
      return this.size * (1 + this.distancePercentage);
    },
    backgroundImage() {
      let lineColors = this.sideLineColors || this.sideDefaultColor;
      return `linear-gradient(to right, ${this.backgroundColor}, ${this.backgroundColor}),
          linear-gradient(180deg, ${function () {
        let colorStr = "";
        for (let i = 0; i < lineColors.length; i++) {
          let colors = lineColors[i];
          colorStr += `${colors.color} ${colors.progress * 100}%`;
          if (i !== lineColors.length - 1) {
            colorStr += ",";
          }
        }
        return colorStr;
      }()})`
    },
    sideDefaultColor() {
      return [
        {color: this.getOpacityColor(this.color, 0), progress: 0.05},
        {color: this.getOpacityColor(this.color, 0.1), progress: 0.1},
        {color: this.getOpacityColor(this.color, 0.2), progress: 0.2},
        {color: this.getOpacityColor(this.color, 0.3), progress: 0.3},
        {color: this.color, progress: 1},
      ]
    },
    shellStyle() {
      return {
        width: `${this.outSize}px`,
        height: `${this.outSize}px`,
        backgroundImage: this.backgroundImage
      }
    },
    mainStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`,
        backgroundColor: this.color
      }
    },
    kernelStyle() {
      return {
        fontSize: `${this.fontSize}px`,
        color: this.fontColor,
      }
    }
  },
  methods: {
    getOpacityColor(thisColor, thisOpacity) {
      let theColor = thisColor.toLowerCase();
      let r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
      if (theColor && r.test(theColor)) {
        if (theColor.length === 4) {
          let sColorNew = "#";
          for (let i = 1; i < 4; i += 1) {
            sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
          }
          theColor = sColorNew;
        }
        let sColorChange = [];
        for (let i = 1; i < 7; i += 2) {
          sColorChange.push(parseInt("0x" + theColor.slice(i, i + 2)));
        }
        return "rgba(" + sColorChange.join(",") + "," + thisOpacity + ")";
      }
      return theColor;
    }
  }
}
</script>

<style>

.blog-component-plate {
  position: relative;
  box-sizing: border-box;
  border-radius: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.blog-component-plate-border {
  position: relative;
  box-sizing: border-box;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-component-plate-content {
  z-index: 1;
}

</style>
